<template>
  <div class="gift-money-area">
    <div class="gift-money-content">
      <div class="top">
        <div class="banquet-name">{{banquet.name}} &nbsp;&nbsp; 总随礼宾客人数:{{banquet.totalGuest}}&nbsp;&nbsp;&nbsp;  总随礼:{{banquet.totalMoney}}元</div>
        <el-input placeholder="请输入内容" v-model="searchValue" class="input-with-select  search">
          <el-button slot="append" icon="el-icon-search" @click="searchData"></el-button>
        </el-input>
      </div>
      <div class="list">
        <div class="item-header">
          <div>宾客姓名</div>
          <div>礼金（元）</div>
          <div>是否代礼</div>
          <div>备注</div>
          <div>创建时间</div>
        </div>
        <div class="item-row" v-for="giftMoney in giftMoneyList" :key="giftMoney.id">
          <div>{{giftMoney.guestName}}</div>
          <div>{{giftMoney.giftMoney}}</div>
          <div>{{giftMoney.isProxyName}}</div>
          <div>{{giftMoney.remark}}</div>
          <div>{{giftMoney.crtTime}}</div>
        </div>

        <el-pagination class="page-tool"
            background
            layout="sizes,prev, pager, next"
            :current-page="page.pageNum"
            :page-sizes="page.pageSizes"
            :page-size="page.pageSize"
            :total="page.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            @prev-click="handlerPrevClick"
            @next-click="handlerNextClick"
        >
        </el-pagination>
      </div>
    </div>
    <el-button type="primary" icon="el-icon-plus" class="add" @click="addGiftMoney"></el-button>
    <el-button type="primary" icon="el-icon-download" class="export" @click="exportGiftMoney"></el-button>
  </div>
</template>

<script>
import PageUtil from "@/utils/PageUtil";
import ResultUtil from "@/utils/ResultUtil";
import { Message } from 'element-ui';

export default {
  name:'BanquetGiftMoneyList',
  data(){
    return {
      banquetId: this.$route.query.banquetId,
      giftMoneyList: [],
      page:PageUtil.defaultPage(),
      banquet:{},
      searchValue:null
    }
  },
  methods:{
    async getGiftMoneyPageList(){
      if(!this.banquetId){
        Message({
          message: "banquetId不能为空",
          type: 'error',
          duration:5000,
          showClose:true,
          center:true
        });
        return;
      }
      let result = await this.$API.reqGiftMoneyPageList(Object.assign(PageUtil.toRequestPage(this.page),{banquetId:this.banquetId,searchValue:this.searchValue}));
      if(ResultUtil.isSuccess(result)){
        this.giftMoneyList = result.data.list;
        this.page = PageUtil.extractPage(result.data);
      }
    },
    async getBanquetById(){
      if(!this.banquetId){
        Message({
          message: "banquetId不能为空",
          type: 'error',
          duration:5000,
          showClose:true,
          center:true
        });
        return;
      }
      let result = await this.$API.reqBanquetWithSummaryById(this.banquetId);
      if(ResultUtil.isSuccess(result)){
        this.banquet = result.data;
      }
    },
    addGiftMoney(){
      this.$router.push(`/giftMoney/add?banquetId=${this.banquetId}`)
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getGiftMoneyPageList();
    },
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.getGiftMoneyPageList();
    },
    handlerPrevClick(val){
      this.page.pageNum = val;
      this.getGiftMoneyPageList();
    },
    handlerNextClick(val){
      this.page.pageNum = val;
      this.getGiftMoneyPageList();
    },
    searchData(){
      this.getGiftMoneyPageList();
    },
    exportGiftMoney(){
      Message({
        message: "请在navcat里面导出txt",
        type: 'warn',
        duration:5000,
        showClose:true,
        center:true
      });
      return;
    }
  },
  mounted() {
    this.getGiftMoneyPageList();
    this.getBanquetById();
  }
}
</script>

<style scoped>
.gift-money-area{
  width: 100%;
  min-height: 100vh;
  position: relative;
}
.gift-money-content{
  width: 100%;
  min-height: 100vh;
}

.add{
  position: absolute;
  top: 20px;
  right: 0;
}

.export{
  position: absolute;
  top: 80px;
  right: 0;
}

.top{
  height: 20vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 32px;
}

.top .banquet-name{
  font-size: 40px;
  font-family: 'shou_xie_ti',sans-serif;
  font-weight: bold;
  margin-top: 20px;
}

.search{
  width: 50vw;
  margin: 20px 0px;
}

.list{
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
  border-radius: 15px;
  overflow-x: hidden;
}


.page-tool{
  margin: 20px 0px;
}

.list .item-header{
  font-size: 20px;
  font-family: 'Poppins',sans-serif;
  font-weight: bold;
  color: #909399;
  display: flex;
  justify-content: space-around;
}

.list .item-header div{
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.list .item-header div:nth-child(1){
  width: 30vw;
}
.list .item-header div:nth-child(2){
  width: 15vw;
}
.list .item-header div:nth-child(3){
  width: 10vw;
}
.list .item-header div:nth-child(4){
  width: 20vw;
}
.list .item-header div:nth-child(5){
  width: 25vw;
}


.list .item-row{
  font-size: 40px;
  font-family: 'shou_xie_ti',sans-serif;
  font-weight: bold;
  color: #303133;
  display: flex;
  justify-content: space-around;
  transition: 0.5s ease;
}

.list .item-row:hover{
  transform: scale(1.05);
  box-shadow: 0 0 10px #409EFF;
}

.list .item-row div{
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.list .item-row div:nth-child(1){
  width: 30vw;
}
.list .item-row div:nth-child(2){
  width: 15vw;
}
.list .item-row div:nth-child(3){
  width: 10vw;
}
.list .item-row div:nth-child(4){
  width: 20vw;
}
.list .item-row div:nth-child(5){
  width: 25vw;
}

.list .item-row:nth-child(odd){
  background-color: #ECF5FF;
}

.list .item-row:nth-child(even){
  background-color: #fff;
}

</style>
